<template>
  <div class="bg">
    <vue-particles
       color="#dedede"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="polygon"
      :particleSize="4"
      linesColor="#dedede"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="my-particles"
    >
    </vue-particles>
    <div class="login-bg">
      <div class="form-box">
        <h1>登录</h1>
        <a-form
          id="components-form-demo-normal-login"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              size="large"
              v-decorator="[
                'userName',
                { rules: [{ required: true, message: '账号不能为空' }] },
              ]"
              placeholder="请输入账号"
            >
              <a-icon
                slot="prefix"
                type="user"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              size="large"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '密码不能为空' }] },
              ]"
              type="password"
              placeholder="请输入密码"
            >
              <a-icon
                slot="prefix"
                type="lock"
                style="color: rgba(0, 0, 0, 0.25)"
              />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button
              type="primary"
              html-type="submit"
              class="login-form-button"
              size="large"
              block
            >
              登录
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = new URLSearchParams();
          params.append("username", values.userName);
          params.append("password", values.password);
          this.$axios({
            method: "post",
            url: "/login",
            data: params,
          }).then((res) => {
            if (res.data.code === "200") {
              const token = res.data.data.token;
              localStorage.setItem("Access-Token", token);
              const user = token.split(".")[1];
              const Base64 = require("js-base64").Base64;
              const userInfo = Base64.decode(user);
              this.$store.commit("setUserInfo", userInfo);
              this.$notification.success({
                message: "晚上好啊",
                description: "你好啊",
              });
              this.$router.push("/home");
            } else if (res.data.code === "10000") {
              this.$message.error(res.data.message);
            } else {
              this.$message.error("网络错误，请检查您的网络是否连接");
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.login-bg {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.form-box {
  width: 25%;
  padding: 30px;
}
.bg{
  position: relative;
}
.bg .my-particles{
  position:absolute;
  width: 100%;
  height: 100%;
  background-image: url("https://vue-particles.netlify.app/static/img/sky.871d198.jpg");

}
</style>
